<template>
  <div>
    <ylheader :leftsvg='true' :title="'规则说明'" ></ylheader>
    <div class="loadmore-container" ref="pointsruleWrapper">
      <div class="loadmore-ul">
        <div class="rule-all">
          <div class="ruledetail" v-for="(item,index) in rulelist" :key="index">
            <h2>{{item.titile}}</h2>
            <p>{{item.content}}</p>
           
          </div>
        </div>
        <h2 class="rulethree">三、绿币的规则有哪些？</h2>
        <p class="addpoints">加分机制</p>
        <div  class="tb-d" v-for="(item,m) in list" :key="m">
            <p class="addpointsnotes" v-if="m==list.length-1">注：以上产生加分行为的内容删掉/取消会重新扣除对应的积分哦~并且已经加过的分数，已计入每日上限。</p>
            <p class="addpoints" v-if="m==list.length-1">减分机制</p>
          <table cellspacing='0' cellpadding='0'>
            <tbody>
              <tr valign="middle">
                <th v-for="(items,index) in item.title" :key="index" valign="middle">{{items}}</th>
              </tr>
              <tr v-for="(items,i) in item.detail" :key="i" >
                <td class="b-left" valign="middle">{{items.task}}</td>
                <td valign="middle">{{items.greencoins}}</td>
                <td v-if="m!=list.length-1" valign="middle">{{items.toppoints}}</td>
              </tr>
            </tbody>
          </table>
        </div>
         <div class="rule-all reducerule">
          <div class="ruledetail" >
            <h2>四、什么情况下扣除绿币？</h2>
            <p v-for="(item,index) in reducerulelist" :key="index" :class="['reducerule',{ruducedetail:index<4},{addpointsnotes:index>3&&index<9}]">{{item}}</p>
           </div>
         </div>
        <p style="padding-bottom:25px"></p>
      </div>
    </div> 
  </div>
</template>
<script>
import ylheader from "src/components/yl-header.vue";
export default {
  name: "pointsrule",
  data() {
    return {
      rulelist: [
        {
          titile: "一、什么是绿币?",
          content: "绿币专属幸福生活秀，绿币可用于生活秀的幸运大转盘抽奖活动、积分兑换以及参与特定的积分活动。"
        },
        {
          titile: "二、如何获取绿币?",
          content: "每日登陆幸福生活秀、每日生活秀互动、每日签到（据说连续签到还有超级多积分赠送哦~）以及特定的积分活动。"
        },
       
      ],
      list: [
        {
          title: ["普通任务", "幸福绿币(L币)", "每日上限"],
          detail: [
            { task: "发布闲置", greencoins: "+10", toppoints: "50" },
            { task: "发布说说", greencoins: "+8", toppoints: "40" },
            { task: "发布讨论", greencoins: "+5", toppoints: "25" },
            { task: "发布评论", greencoins: "+3", toppoints: "15" },
            { task: "点赞", greencoins: "+2", toppoints: "10" }
          ]
        },
        {
          title: ["登录任务", "幸福绿币(L币)", "每日上限"],
          detail: [{ task: "每日首次登录", greencoins: "+5", toppoints: "5" }]
        },
        {
          title: ["签到任务", "幸福绿币(L币)", "每日上限"],
          detail: [{ task: "签到", greencoins: "详见签到规则", toppoints: "详见签到规则" }]
        },
        {
          title: ["精华推荐", "幸福绿币(L币)", "每日上限"],
          detail: [{ task: "说说被人工推荐(展示热门说说)", greencoins: "+20", toppoints: "40" }]
        },
        {
          title: ["减分行为", "幸福绿币(L币)"],
          detail: [
            { task: "删说说", greencoins: "-8" },
            { task: "删讨论", greencoins: "-5" },
            { task: "删评论", greencoins: "-3" },
            { task: "删闲置", greencoins: "-10" },
            { task: "取消赞", greencoins: "-2" },
            { task: "发广告", greencoins: "-20" },
            { task: "不当言论", greencoins: "-20"},
            { task: "刷屏", greencoins: "-20" },
            { task: "兑换", greencoins: "以页面显示为准" },
            { task: "抽奖", greencoins: "以页面显示为准" }
          ]
        }
      ],
       reducerulelist:[//扣除绿币
          "1.同一内容连续发送2条及以上和不同账号的同一内容即为刷屏（小绿要求的特定环境除外），刷屏内容将被删除且每条扣20绿币（无上限），若因网络问题等问题导致连续发送，由系统判定后删除并扣掉所得绿币。",
          "2.同一账号说说/讨论/评论/闲置同一位置连续发送3条及以上内容即为刷屏，刷屏内容将被删除且每条扣20绿币（无上限）。（例：某一账号同一话题下连续发布3条讨论，某一账号说说处连续发布3条说说，等）。",
          "3.若同一内容经简单修改后发送2次及以上，将被删除并扣掉相应绿币，且该房号将限制获取福利一周（含积分兑换）。",
          "4.讨论、说说、闲置不得发送水贴，水贴将被删除并扣掉相应绿币。",
          "水贴定义:",
          "纯表情，纯符号等少于10个字的无意的说说、讨论、闲置；",
          "发布的内容非连贯完整的一句话（例：今天、明天、后天、现在、然后...等）；",
          "发布的内容仅为凑字数（例：我就是为了来凑10个字的；1234567890；abcdefghijk）；",
          "发布的内容重复一句话（例：今天天气真好今天天气真好）；",
          "注：以上获取的绿币已计入每日上限，删除后当日绿币将不会继续发放。",
        ]
    };
  },
  components: { ylheader},
  mounted() {  
    this.initScroll().then(data => {
      this.$nextTick(() => {
        setTimeout(() => {
          this.myscroll.refresh();
        }, 800);
      })
    })
  },
  methods: {
    //初始化scroll
    initScroll() {
      let p = new Promise((resolve, reject) => {
        let pointsruleWrapper = this.$refs.pointsruleWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-ul"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(pointsruleWrapper, {
            preventDefault: false,
            onScrollMove: function() {
            },
            onScrollEnd: function() { },
            onScrollStart: function() {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-ul")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    },

  }
};
</script>
<style lang="less" scoped>
.ruducedetail{
  margin-bottom: 0.15rem;
}
.reducerule{
  margin-top:0!important;
}
.rule-all {
  margin-top: 0.44rem;
  .ruledetail {
    margin: 0 0.3rem;
    line-height: 0.52rem;
    h2 {
      font-family: PingFangSC Medium;
      color: #3a3a3a;
      font-size: 0.3rem;
    }
    p {
      color: #666666;
      font-size: 0.26rem;
    }
  }
}
.rulethree {
  font-family: PingFangSC Medium;
  color: #3a3a3a;
  margin: 0 0.3rem;
  font-size: 0.3rem;
  line-height: 0.52rem;
}
.addpoints {
  width: 100%;
  text-align: center;
  font-size: 0.28rem;
  color: #3a3a3a;
  margin: 0.2rem 0;
}
.addpointsnotes {
  width: 100%;
  font-size: 0.22rem!important;
  color: #999999!important;
  margin-top: -0.2rem;
  line-height: 0.4rem;
}
.tb-d {
  border-collapse: separate;
  margin: 0 0.3rem 0.2rem;
  table {
    border-radius: 10px;
    width: 100%;

    tr {
      height: 0.5rem;
      line-height: 0.5rem;
      th {
        background: #c4bdbc;
        color: white;
        flex: 1;
        padding-top: 0.1rem;
      }
      th:last-child {
        border-top-right-radius: 3px;
      }
      th:first-child {
        border-top-left-radius: 3px;
      }
      td {
        color: #444444;
        text-align: center;
        padding-top: 0.1rem;
        background: #ffffff;
        border-bottom: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
        width: 33.3%;
        :first-child {
          border-bottom-left-radius: 10px;
        }
        :last-child {
          border-bottom-right-radius: 10px;
        }
      }
    }
    tr:last-child {
      td:last-child {
        border-bottom-right-radius: 3px;
      }
      td:first-child {
        border-bottom-left-radius: 3px;
      }
    }
  }
}
.b-left {
  border-left: 1px solid #e6e6e6;
}
</style>


